<template>
    <div class="file-preview-container">
        <div class="header">
            <div class="file-info">
                <template v-if="files?.filetype !== 'json'">
                    <span class="single-file-name">{{ files?.tabname ?? "效果图" }}</span>
                </template>
                <template v-else>
                    <div class="file-tabs">
                        <button v-for="(file, index) in jsonFileData" :key="index" class="tab-button"
                            :class="{ active: activeIndex === index }" @click="switchTab(index)">
                            {{ file.tab }}
                        </button>
                    </div>
                </template>
            </div>
            <button class="close-button" @click="handleClose">
                <el-icon>
                    <CloseBold :size="16" />
                </el-icon>
            </button>
        </div>
        <!-- {{ files}} -->
        <!-- {{ jsonFileData[activeIndex].fileContent }}
        {{ files.data }} -->
         <div style="display: none;">
            {{ files}}
         </div>
        <div class="preview-content" v-loading="(files?.state ?? 0) == 0">
            <div v-if="files?.filetype == 'json'">
                <jsonTable :Data="files?.data?.[jsonFileData[activeIndex]?.fileContent] ?? ''"
                    :type="jsonFileData[activeIndex].type" :pid="files?.componentId ?? ''">
                </jsonTable>

            </div>
            <div v-if="files?.filetype == 'pdf' || files?.filetype == 'img1'">

                <filePDF :pdfSource="files.pdfUrl"></filePDF>
            </div>
            <!-- {{ files.data }} -->
            <div v-if="files?.filetype == 'img2'" style="width: 100%;">
                <img2 :modelUrl="files.data?.rendingFile3D" :imageUrl1="files.data?.packageRendingImage"
                    :imageUrl2="files.data?.symbolRendingImage"></img2>
            </div>
        </div>
    </div>
</template>

<script setup>
import { CloseBold, Delete, Brush, Top } from "@element-plus/icons-vue";

import { ref, computed } from 'vue'
import jsonTable from '@/components/jsonTable.vue'
import filePDF from '@/components/filePDF.vue'
import img2 from '@/components/img2.vue'
import { useImagePreview } from './useImagePreview';

const { showImagePreview } = useImagePreview()



// import PdfPreview from './PdfPreview.vue'
// import ImagePreview from './ImagePreview.vue'
// import TextPreview from './TextPreview.vue'
import { emitter } from '@/utils/emitter.js'

emitter.on('update-data', (data) => {
    console.log("data", data);

    files.value = data
})
// const props = defineProps({
//   files: {
//     type: Array,
//     required: true,
//     validator: (value) => {
//       return value.every(file => file.name && file.url && file.type)
//     }
//   }
// })



const files = ref()

const emit = defineEmits(['close'])

const activeIndex = ref(0)

const jsonFileData = [
    
    {
        tab: "管脚对应表",
        fileName: 'symbolJsonName',
        fileContent: "symbolJsonContent",
        imgUrl: "symbolImage",
        type: 'sys'
    },
    {
        tab: "器件参数表",
        fileName: 'packageJsonName',
        fileContent: "packageJsonContent",
        imgUrl:'packageImage',
        type: 'pack'

    }
]



const currentFile = computed(() => props.files[activeIndex.value])


const switchTab = (index) => {
    activeIndex.value = index
    console.log("e116",files.value?.data?.[jsonFileData[activeIndex.value]?.imgUrl] ?? '');
    console.log("e116",activeIndex.value ?? '');
    console.log("e116",jsonFileData[activeIndex.value]?.imgUrl ?? '');
    console.log("e116",files);
    
    showImagePreview(files.value?.data?.[jsonFileData[activeIndex.value]?.imgUrl] ?? '')
}

const handleClose = () => {
    emit('close')
}
</script>

<style scoped>
.file-preview-container {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    /* border-bottom: 1px solid #e5e7eb; */
}

.file-info {
    flex: 1;
}

.single-file-name {
    font-size: 16px;
    font-weight: 500;
    color: #1f2937;
}

.file-tabs {
    display: flex;
    gap: 8px;
}

.tab-button {
    padding: 6px 12px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 14px;
    /* color: #666666; */
    border-radius: 16px;
    transition: all 0.2s;
}

.tab-button:hover {
    color: #409eff;
    /* background-color: #f3f4f6; */
}

.tab-button.active {
    color: #409eff;
    background-color: #ecf5ff;
    font-weight: 500;
}

.close-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    color: #6b7280;
    transition: all 0.2s;
}

.close-button:hover {
    /* color: #ef4444; */
    background-color: #f3f4f6;
}

.preview-content {
    flex: 1;
    overflow: auto;

    box-sizing: border-box;
    padding: 0 16px;
}
</style>
